<template>
  <div class="menuWrapper">
    <ul>
      <li @click="goHome()">
        <i class="home" :class="{'home-active': current == 0}"></i>
        <p>首页</p>
      </li>
      <li @click="goMarket()">
        <i class="market" :class="{'market-active': current == 1}"></i>
        <p>贷款超市</p>
      </li>
      <li @click="goMy()">
        <i class="my" :class="{'my-active': current == 2}"></i>
        <p>我的</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0
    }
  },
  methods: {
    goHome() {
      this.current = 0;
      this.$router.push({
        path: "/home"
      });
    },
    goMarket() {
      this.current = 1;
      this.$router.push({
        path: "/market"
      });
    },
    goMy() {
      this.current = 2;
      this.$router.push({
        path: "/my"
      });
    }
  }
};
</script>

<style lang="less">
@import "./menu.less";
</style>
